<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id="app"></div>
</body>
<script src="./js/vue.js"></script>
<script src="./js/axios.js"></script>
<script>
    let App={
        template:`
            <div>
                <button @click='getData'>发送请求</button>
            </div>
        `,
        methods:{
            // 模拟发送cookie
            getData(){

                // 请求拦截器   us给请求之前做的事是可以多件的，可以有过个USE  类似中间件
                this.$axios.interceptors.requset.use((config)=>{
                    var token = localStorage.getItem('token');
                    if(token){
                        config.hearders['token']=token;
                    }
                    return config;
                });
                // 响应拦截器
                this.$axios.interceptors.response.use((res)=>{
                    // 1.从相应头里获取 服务器传的cookie
                    if(res.data.token){
                        let  token = res.data.token;
                        localStorage.setItem('token',token);
                    }
                    return res;
                });
                axios.get('/user', {
                    params: {
                        ID: 12345
                    }
                })
                .then(function (response) {
                    console.log(response);
                })
                .catch(function (error) {
                    console.log(error);
                });
            }
        }
    }
    // 组件内的每一个this对象，都是Vue的孩子
    // Vue祖宗的原型数据，就会共享给所有的孩子

    Vue.prototype.$axios=axios;

    new Vue({
        el:'#app',
        components:{
            App
        },
        template:"<app/>"
    })


</script>
</html>